<template>
    <el-row>
        <el-col :span="24">
            <!--删除过程中，不允许其他操作-->
            <el-button v-if="!showDeleteCheckbox" type="primary" @click="updateTableItem()">新增</el-button>
            <el-button v-if="!showDeleteCheckbox" @click="showDeleteCheckbox = true;" type="danger">删除</el-button>
            <!--删除过程中，只出现确认删除按钮-->
            <el-button v-if="showDeleteCheckbox" @click="deleteTableItem(chosenItem); showDeleteCheckbox = false; chosenItem=[];" type="danger">确认删除</el-button>
            <el-button v-if="showDeleteCheckbox" @click="showDeleteCheckbox = false">取消</el-button>
        </el-col>
    </el-row>

    <el-table stripe :data="tableData" style="border: 1px solid #ebebeb; border-radius: 3px; margin-top: 10px;">
        <el-table-column prop="id" label="id" width="100">
            <template slot-scope="scope">
                <!--el-checkbox 多选框， checked 绑定是否选中， click 绑定点击事件-->
                <el-checkbox v-if="showDeleteCheckbox" :checked="chosenItem.indexOf(scope.row.id) > -1" @change="toggleChosenItem(scope.row.id)" style="margin-right: 5px;"></el-checkbox>
                <span>{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="date" width="200"></el-table-column>
        <el-table-column prop="name" label="name" width="200"></el-table-column>
        <el-table-column prop="phone" label="phone"></el-table-column>
        <el-table-column fixed="right" label="operation" width="300">
            <template slot-scope="scope">
                <!--删除过程中，禁用其他操作-->
                <el-button :disabled="showDeleteCheckbox" @click="updateTableItem(scope.row.id)" type="info" size="small">编辑</el-button>
                <el-button :disabled="showDeleteCheckbox" @click="deleteTableItem([scope.row.id])" type="danger" size="small">删除</el-button>
                <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'up')" size="small">上移</el-button>
                <el-button :disabled="showDeleteCheckbox" @click="moveTableItem(scope.row.id, 'down')" size="small">下移</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import tableData from "./data";

export default {
    data() {
        return {
            tableData,
            // 弹窗是否出现
            dialogFormVisible: false,
            // 是否批量删除
            showDeleteCheckbox: false,
            // 选中的选项
            chosenItem: [],
        };
    },

    methods: {
        // 新增、更新数据
        updateTableItem(id=0) {
            // 跳转到编辑页面，新增则传id为0，否则为编辑
            if(id !== 0) {
                this.$router.push({name: "ProductEdit", params: {id}});
            } else {
                this.$router.push({name: "ProductAdd"});
            }
        },
        // 删除数据
        deleteTableItem(idArray) {
            this.tableData = this.tableData.filter(x => idArray.indexOf(x.id) === -1);
        },
        moveTableItem(id, direction) {
            const dataLength = this.tableData.length;

            // 查找对应的索引，然后取出，再插入
            const index = this.tableData.findIndex(x => x.id === id);
            switch (direction) {
                case "up":
                    // 上移
                    if(index > 0) {
                        const item = this.tableData.splice(index, 1)[0];
                        this.tableData.splice(index - 1, 0, item);
                    }
                    break;
                case "down":
                    // 下移
                    if(index < dataLength -1) {
                        const item = this.tableData.splice(index, 1)[0];
                        this.tableData.splice(index+1, 0, item);
                    }
                    break;
            }
        },

        toggleChosenItem(id) {
            const index = this.chosenItem.findIndex(x => x.id === id);
            if(index > -1) {
                // 有该选项则删除
                this.chosenItem.splice(index, 1);
            } else {
                // 无该选项则添加
                this.chosenItem.push(id);
            }
        },

        submitForm() {
            // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
            this.$refs["form"].validate((valid) => {
                if(valid) {
                    this.dialogFormVisible = false;
                    this.updateTableItem(this.form)
                } else {
                    // 校验失败
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped>

</style>